Instant Feedback

instantFeedback is a template that supports showing feedback as soon as the user answers an onboarding question.

Key	Notes
`type`	`instantFeedback`
`stepId`	Unique step id
`feedbackType`	Supports 3 types of feedback `radio`, `emoji` and `popup` (check the screen shots)
`title`
`subtitle`
`positive`	It shows the text that should show to the user once if they answer a positive answer. `"positive": {` `"title": "Way to go!",` `"subtitle": "Way to go! exercising keeps you fit and healthy.",` `"backgroundColor": "#F0FDFA",` `"titleColor": "#2F0191",` `"subtitleColor": "#4E17C3",` `"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/Feedback_Positive.png"` `}` Note: that object accepts a `popupBackgroundColor` key for the `popup` feedback.
`negative`	It shows the text that should show to the user once if they answer a negative answer. `"negative": {` `"title": "Way to go!",` `"subtitle": "Way to go! exercising keeps you fit and healthy.",` `"backgroundColor": "#F0FDFA",` `"titleColor": "#2F0191",` `"subtitleColor": "#4E17C3",` `"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/Feedback_Positive.png"` `}` Note: that object accepts a `popupBackgroundColor` key for the `popup` feedback.
`choiceBackgroundColor`	The choices background color
`choiceTextColor`	The choices text color
`hoverBackgroundColor`	The background color on hovering one of the choice.
`selectedCheckboxBackgroundColor`	The color of the selected choice.
`checkboxBackgroundColor`	The color of the selected choice.
`dividerColor`	It’s required only if the feedback is `emoji`
`backgroundImage`	Background image for mobile
`desktopBackground`	Background image for desktop
`choices`	An array of the choices on that feedback `"choices": [` `{` `"name": "Negative",` `"value": "Very negative",` `"feedbackMode": "negative",` `"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/emoji-very-negative.png"` `},` `{` `"name": "Positive",` `"value": "Very positive",` `"feedbackMode": "positive",` `"imageUrl": "https://c.thefab.co/web-onboarding/fabulous/emoji-very-positive.png"` `}` `]` `}` Note: `feedbackMode` is required to decide if the `positive` or `negative` feedback once the user answers that quesion.
`textColor`	The main textColor on the page
`ctaText`	The text of the main button
`ctaColor`	The text color of the main button
`ctaBackgroundColor`	The background color of the main button
`ctaHoverBackgroundColor`	The background of the main button on hovering.
`backButtonColor`	The text color of the back button
`backButtonBackgroundColor`	The background color of the back button
`backButtonText`	The text of the back button

Examples

popup Feedback

popup Feedback

{
    "type": "instantFeedback",
    "stepId": "instantFeedback_3",
    "title": "Do you exercise regularly?",
    "textColor": "#2F0191",
    "feedbackType": "popup",
    "backgroundColor": "#FFF",
    "hoverBackgroundColor": "#E7EBFF",
    "choiceBackgroundColor": "#F5F7FF",
    "choiceTextColor": "#2F0191",
    "selectedCheckboxBackgroundColor": "##2F0191",
    "checkboxBackgroundColor": "#FFF",
    "ctaText": "Continue",
    "ctaColor": "#FFF",
    "ctaBackgroundColor": "#FF8E21",
    "ctaHoverBackgroundColor": "#E67100",
    "backButtonColor": "#FFA133",
    "backButtonBackgroundColor": "#FFF8F1",
    "backButtonText": "Back",
    "positive": {
        "title": "Way to go!",
        "subtitle": "Way to go! exercising keeps you fit and healthy.",
        "backgroundColor": "#FFF",
        "titleColor": "#2F0191",
        "subtitleColor": "#4E17C3",
        "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/feedback-positive-Illo.png",
        "popupBackgroundColor": "rgba(23, 5, 60, 0.40)"
    },
    "negative": {
        "title": "Don’t worry",
        "subtitle": "Fabulous will help you take easy steps to incorporate regular exercise in your routine.",
        "backgroundColor": "#FFF",
        "titleColor": "#2F0191",
        "subtitleColor": "#4E17C3",
        "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/feedback-negative-Illo.png",
        "popupBackgroundColor": "rgba(23, 5, 60, 0.40)"
    },
    "choices": [
        {
            "name": "Yes",
            "value": "Yes",
            "feedbackMode": "positive"
        },
        {
            "name": "No",
            "value": "No",
            "feedbackMode": "negative"
        }
    ]
},

emoji Feedback

emoji Feedback

{
    "type": "instantFeedback",
    "stepId": "instantFeedback_2",
    "title": "Do you exercise regularly?",
    "textColor": "#2F0191",
    "feedbackType": "emoji",
    "backgroundColor": "#FFF",
    "hoverBackgroundColor": "#E7EBFF",
    "choiceBackgroundColor": "#F8F5FF",
    "selectedCheckboxBackgroundColor": "#4103C4",
    "checkboxBackgroundColor": "#FFF",
    "dividerColor": "#EBE1FE",
    "ctaText": "Continue",
    "ctaColor": "#FFF",
    "ctaBackgroundColor": "#FF8E21",
    "ctaHoverBackgroundColor": "#E67100",
    "backButtonColor": "#FFA133",
    "backButtonBackgroundColor": "#FFF8F1",
    "backgroundImage": "https://c.thefab.co/fabulous/onboarding/fabulous_web/amber_mobile.jpg",
    "desktopBackground": "https://c.thefab.co/fabulous/onboarding/fabulous_web/amber_desktop.jpg",
    "backButtonText": "Back",
    "positive": {
        "title": "Way to go!",
        "subtitle": "Way to go! exercising keeps you fit and healthy.",
        "backgroundColor": "#F0FDFA",
        "titleColor": "#2F0191",
        "subtitleColor": "#4E17C3",
        "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/Feedback_Positive.png"
    },
    "negative": {
        "title": "Don’t worry",
        "subtitle": "Fabulous will help you take easy steps to incorporate regular exercise in your routine.",
        "backgroundColor": "#FFF8F1",
        "titleColor": "#2F0191",
        "subtitleColor": "#4E17C3",
        "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/Feedback_Negative.png"
    },
    "choices": [
        {
            "name": "Very negative",
            "value": "Very negative",
            "feedbackMode": "negative",
            "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/emoji-very-negative.png"
        },
        {
            "name": "Negative",
            "value": "Negative",
            "feedbackMode": "negative",
            "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/emoji-negative.png"
        },
        {
            "name": "Neutral",
            "value": "Neutral",
            "feedbackMode": "negative",
            "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/emoji_neutral.png"
        },
        {
            "name": "Positive",
            "value": "Positive",
            "feedbackMode": "positive",
            "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/emoji-positive.png"
        },
        {
            "name": "Very positive",
            "value": "Very positive",
            "feedbackMode": "positive",
            "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/emoji-very-positive.png"
        }
    ]
},

radio Feedback

radio Feedback

  {
      "type": "instantFeedback",
      "stepId": "instantFeedback_1",
      "title": "Do you exercise regularly?",
      "textColor": "#2F0191",
      "feedbackType": "radio",
      "backgroundColor": "#FFF",
      "hoverBackgroundColor": "#E7EBFF",
      "choiceBackgroundColor": "#F5F7FF",
      "choiceTextColor": "#2F0191",
      "selectedCheckboxBackgroundColor": "##2F0191",
      "checkboxBackgroundColor": "#FFF",
      "ctaText": "Continue",
      "ctaColor": "#FFF",
      "ctaBackgroundColor": "#FF8E21",
      "ctaHoverBackgroundColor": "#E67100",
      "backButtonColor": "#FFA133",
      "backButtonBackgroundColor": "#FFF8F1",
      "backButtonText": "Back",
      "positive": {
          "title": "Way to go!",
          "subtitle": "Way to go! exercising keeps you fit and healthy.",
          "backgroundColor": "#F0FDFA",
          "titleColor": "#2F0191",
          "subtitleColor": "#4E17C3",
          "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/Feedback_Positive.png"
      },
      "negative": {
          "title": "Don’t worry",
          "subtitle": "Fabulous will help you take easy steps to incorporate regular exercise in your routine.",
          "backgroundColor": "#FFF8F1",
          "titleColor": "#2F0191",
          "subtitleColor": "#4E17C3",
          "imageUrl": "https://c.thefab.co/web-onboarding/fabulous/Feedback_Negative.png"
      },
      "choices": [
          {
              "name": "Yes",
              "value": "Yes",
              "feedbackMode": "positive"
          },
          {
              "name": "No",
              "value": "No",
              "feedbackMode": "negative"
          }
      ]
  },

Examples​

Examples